<template>
  <view class="CustomPopup">
    <view class="inputArea" :class="{ clear: !!showText }" @click="handleClick">
      <wd-input
        :placeholder="placeholder || `请选择${label}`"
        type="text"
        readonly
        v-model="showText"
        clearable
        v-bind="$attrs"
      />
      <view
        v-if="!!showText && !disabled"
        class="u-iconfont u-icon-close"
        @click.stop="handleClear"
      ></view>
    </view>
    <PopupModal
      v-if="modal.show"
      :api="api"
      :columns="columns"
      :keywordField="keywordField"
      :textField="textField"
      :valueField="valueField"
      :multi="multi"
      :searchPlaceholder="searchPlaceholder"
      @close="handleClose"
      @change="handleChange"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useToast } from 'wot-design-uni'
import PopupModal from './components/PopupModal.vue'

const props = defineProps({
  // 接口配置
  api: {
    type: Object,
    required: true,
    validator(value) {
      return (
        value.url &&
        typeof value.url === 'string' &&
        value.method &&
        typeof value.method === 'string'
      )
    },
  },
  // 搜索关键词字段名
  keywordField: {
    type: String,
    default: 'keyWord',
  },
  // 显示文本字段
  textField: {
    type: String,
    required: true,
  },
  // 值字段
  valueField: {
    type: String,
    required: true,
  },
  // 表头配置
  columns: {
    type: Array,
    required: true,
  },
  // 初始值
  modelValue: {
    type: [String, Number, Array],
    default: '',
  },
  // 是否多选
  multi: {
    type: Boolean,
    default: false,
  },
  // 分隔符
  separator: {
    type: String,
    default: ',',
  },
  // 占位符
  placeholder: {
    type: String,
    default: '',
  },
  // 搜索框占位符
  searchPlaceholder: {
    type: String,
    default: '',
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 标签
  label: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

const toast = useToast()
const showText = ref('')
const modal = reactive({
  show: false,
})

// 监听value变化
watch(
  () => props.modelValue,
  (val) => {
    if (props.multi) {
      showText.value = Array.isArray(val) ? val.join(props.separator) : ''
    } else {
      showText.value = val ? String(val) : ''
    }
  },
  { immediate: true },
)

// 清空选择
const handleClear = (e) => {
  e.stopPropagation()
  showText.value = ''
  emit('update:modelValue', props.multi ? [] : '')
  emit('change', props.multi ? [] : '')
}

// 打开弹窗
const handleClick = () => {
  if (props.disabled) return
  modal.show = true
}

// 关闭弹窗
const handleClose = () => {
  modal.show = false
}

// 处理选择变化
const handleChange = (data) => {
  if (props.multi) {
    const values = data.map((item) => item[props.valueField])
    const texts = data.map((item) => item[props.textField])
    showText.value = texts.join(props.separator)
    emit('update:modelValue', values)
    emit('change', values)
  } else {
    const row = data[0]
    if (row) {
      showText.value = row[props.textField]
      emit('update:modelValue', row[props.valueField])
      emit('change', row[props.valueField])
    }
  }
  handleClose()
}
</script>

<style lang="scss" scoped>
/* 原有样式保持不变 */
</style>
